<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>开奖结果</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div class="text item">
        <div class="title">开奖名称</div>
        <el-input v-model="prize" disabled placeholder="未获取到开奖题目"></el-input>
        <div class="title">开奖描述</div>
        <el-input v-model="explains" disabled placeholder="未获取到开奖描述"></el-input>
        <div class="title">抽奖池</div>
        <el-input v-model="roster" disabled placeholder="未获取到抽奖池"></el-input>
        <span class="title">{{text}}</span>
        <el-divider></el-divider>
        <el-input
          type="textarea"
          v-loading="loading"
          disabled
          :rows="2"
          placeholder="获奖名单"
          v-model="textarea"
        ></el-input>
        <!-- <el-divider></el-divider>
        <el-button type="primary" @click="createCj">开始下一轮抽奖</el-button>
        <el-button type="primary" @click="createCj">错过开奖时间,点我查看结果</el-button> -->
      </div>
    </el-card>
  </div>
</template>

<script>
import { websocketObj } from "../../@/websocket/websocket";
export default {
  data() {
    return {
      // text: "开奖中...等待负责人开奖",
      explains :"",
      wx: "",
      loading: true,
      // index: false,
      prize: "",
      form: {},
      textarea: ""
    };
  },
  methods: {
    createCj() {
      if (this.wx.close) this.wx.close();
      this.wx = websocketObj("cj", res => {
        let resObj = JSON.parse(res)
        window.console.log(resObj)
        this.prize = resObj.prize
        this.explains = resObj.explains
        this.roster = resObj.roster
        this.loading = !resObj.state
        this.textarea = resObj.resData
      });
    }
  },
  created() {
    this.createCj();
  },
  computed: {
    text: function() {
      return this.loading
        ? "开奖中...等待负责人开奖"
        : "开奖啦，中奖名单如下：";
    }
  },
  beforeDestroy() {
    this.wx.close();
  }
};
</script>

<style lang="scss">
.el-input.is-disabled .el-input__inner {
  color: black
}
.box-card {
  background-color: #eee;
}
.item {
  width: 800px;
}
.title {
  line-height: 60px;
}
</style>